<html>
<head>
    <title>NFT_test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div style="position:absolute; color:white; top:0;left:0" id="stats1"><div>Main</div></div>
<div id="container">
    <video id="video"></video>
    <canvas style="position: absolute; left:0; top:0" id="canvas_draw"></canvas>
</div>

<script src="../js/third_party/three.js/stats.min.js"></script>
<script src="../../build/artoolkit.min.js"></script>
<script src="main.js"></script>

<script>
    var statsMain = new Stats();
    statsMain.showPanel(1); // 0: fps, 1: ms, 2: mb, 3+: custom
    statsMain.domElement.style.position = 'relative';
    statsMain.domElement.style.left = '0px';
    statsMain.domElement.style.top = '0px';
    document.getElementById("stats1").appendChild(statsMain.dom);

    var container = document.getElementById('container');
    var video = document.getElementById('video');
    var canvas_draw = document.getElementById('canvas_draw');

    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        var hint = {};
        if (isMobile()) {
            hint = {
                facingMode: {"ideal": "environment"},
                audio: false,
                video: {
                    width: { ideal: 480 },
                    height: { ideal: 640 },
                },
            };
        }

        navigator.mediaDevices.getUserMedia({video: hint}).then(function (stream) {
            video.srcObject = stream;
            video.play();
            video.addEventListener("loadedmetadata", function() {
                start(container, markers["pinball"], video, video.videoWidth, video.videoHeight, canvas_draw, function() {statsMain.update()});
            });
        });
    }
</script>
</body>
</html>
